<template>
  <div class="parent">
    <Parent 
      :parentData="parentData.parent" 
      v-if="parentData.parent" 
      :deep="deep-1" 
      @parentReply="diguiReply"
    />

    <div class="parentComment">
      <div class="userInfo">
        {{ deep }}
        {{ parentData.user.nickname }}
        <div class="date">
          {{ parentData.create_date.split('T')[0] }}
          {{ parentData.create_date.split('T')[1].split('.')[0] }}
        </div>
        <div class="reply" @click="parentReply">回复</div>
      </div>
      <div class="userComment">{{ parentData.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Parent",
  props: ["parentData", "deep"],

  methods: {
    parentReply(){
      // console.log(this.parentData.id,this.parentData.user.nickname);
      this.$emit('parentReply',{
        id:this.parentData.id,
        nickname:this.parentData.user.nickname
      })
    },

    diguiReply(parentInfo){
      this.$emit('parentReply',parentInfo)}
  }
};
</script>

<style lang="less" scoped>
.parent {
  margin-top: 3.333vw;

  .parentComment {
    border: 0.278vw solid #aaa;
    border-top: 0;
    padding: 3.333vw;

    &:nth-child(1) {
      border-top: 0.278vw solid #aaa;
    }

    .userInfo {
      display: flex;
      height: 8.333vw;
      line-height: 8.333vw;

      .date {
        flex: 1;
        font-size: 3.333vw;
        padding-left: 2.222vw;
        color: #707070;
      }

      .reply {
        font-size: 3.333vw;
        color: #707070;
      }
    }

    .userComment {
      line-height: 6.111vw;
      font-size: 3.889vw;
    }
  }
}
</style>